<template>
  <div class="box">
    <JsContentTitle
      :pageTitle="state.pageTitle"
      :buttonData="state.buttonData"
    ></JsContentTitle>
    <div class="contentView">
      <el-form
        ref="ruleFormRef"
        :label-position="state.labelPosition"
        label-width="100px"
        :model="state.formLabelAlign"
        style="max-width: 800px"
        :rules="rules"
      >
        <el-form-item prop="username">
          <template #label>
            <span>用户名</span>
          </template>
          <el-input
            v-model="state.formLabelAlign.username"
            :disabled="id != undefined"
          />
        </el-form-item>
        <el-form-item prop="password" v-if="id == undefined">
          <template #label>
            <span>密码</span>
          </template>
          <el-input v-model="state.formLabelAlign.password" />
        </el-form-item>
        <el-form-item prop="mail">
          <template #label>
            <span>邮箱</span>
          </template>
          <el-input v-model="state.formLabelAlign.mail" />
        </el-form-item>
        <el-form-item prop="phone">
          <template #label>
            <span>手机号码</span>
          </template>
          <el-input v-model="state.formLabelAlign.phone" />
        </el-form-item>
        <el-form-item prop="description">
          <template #label>
            <span>备注</span>
          </template>
          <el-input v-model="state.formLabelAlign.description" />
        </el-form-item>

        <el-form-item class="btns">
          <div style="width: 100%; text-align: center">
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >保存</el-button
            >
            <el-button @click="closeBtn">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()

const back = () => {
  router.go(-1)
}
const closeBtn = () => {
  router.go(-1)
}

let id = ref(router.currentRoute.value.query.id as any)
console.log(id.value)

onMounted(() => {
  console.log(id.value, 'userid')
  if (id.value != undefined) {
    accountDetailQuery()
  }
})

const accountDetailQuery = () => {
  console.log('1111')
}

const ruleFormRef = ref<FormInstance>()
//表单校验
const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      trigger: 'submit',
      message: '请输入',
    },
  ],
  password: [
    {
      required: true,
      trigger: 'submit',
      message:
        '请输入',
    },
  ],
  mail: [
    {
      required: true,
      trigger: 'submit',
      message: '请输入',
    },
  ],
  phone: [
    {
      required: true,
      trigger: 'submit',
      message: '请输入',
    },
  ],
  description: [
    {
      required: true,
      trigger: 'submit',
      message: '请输入',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(state.value.formLabelAlign)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(valid)
      if (id.value != undefined) {
        console.log('1111')
      } else {
        console.log('1111')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

let state = ref({
  buttonData: [
    {
      title: '返回',
      icon: 'Back',
      event: back,
      color: '#028aff',
    },
  ],
  labelPosition: 'right',
  formLabelAlign: {
    // userName: '',
    // password: '',
    // confirmnewpassword: '',
    // emil: '',
    // phone: '',
    // desc: '',
    username: '',
    password: '',
    phone: '',
    mail: '',
    description: '',
  },
  pageTitle: '创建用户',
})

state.value.formLabelAlign = {
  username: 'test',
  password: '123456789',
  phone: '13122223333',
  mail: 'a@a.a',
  description: 'test',
}
if (id.value) {
  state.value.pageTitle = '修改账户信息'
} else {
  state.value.pageTitle = '创建用户'
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;

  .contentView {
    background-color: white;
    border-radius: 5px;
    height: calc(100vh - 144px);
    overflow-y: scroll;
    padding: 10px;
    display: flex;
    flex-direction: column;

    :deep(.el-select) {
      width: 100%;
    }
    .btns {
      :deep(.el-form-item__content) {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }

    .form-view {
      width: 32.5%;
      min-width: 300px;
      padding: 10px;

      :deep(.el-form-item) {
        &.normal {
          .el-form-item__label {
            padding-left: 10px;
          }
        }
      }

      //.btns {
      // display: flex;
      // justify-content: space-around;
      //}

      :deep(.el-form-item__label) {
        text-align: left !important;
        font-size: 12px;
        color: #333;
        font-weight: normal;
      }
    }
  }
}
</style>
